<template>
	<view>
		<uni-nav-bar title="停哪儿" rightIcon="list" leftIcon="back" @clickRight="lishi" @clickLeft="toinde"></uni-nav-bar>
		<uni-search-bar placeholder="搜索停车场"></uni-search-bar>
		<uni-card v-for="(item,index) in ting" :title="item.parkName">
			<view @click="xoam(item.id)">
				<view>空位数量：{{item.vacancy}}个</view>
				<view>地址：{{item.address}}</view>
				<view>收费价格：{{item.rates}}元/h</view>
				<view>距离：{{item.distance}}米</view>
			</view>
		</uni-card>
		<uni-group>
			<button @click="chan" type="primary" v-if="tt"> 查看更多</button>
		</uni-group>
	</view>
</template>

<script>
	import api from 'commer/apiURL.js'
	export default {
		data() {
			return {
				base: api.baseurl,
				ting: [],
				quan:[],
				tt:true
			}
		},
		onLoad() {
			this.getlun()
		},
		methods: {
			xoam(id){
				uni.navigateTo({
					url:'xianq?id='+id
				})
			},
			chan(){
				this.tt = false
				this.ting = this.quan
			},
			lishi(){
				uni.navigateTo({
					url:'lishi'
				})
			},
			toinde(){
				uni.switchTab({
					url:'../allserver'
				})
			},
			getlun() {
				this.$get(this.base + '/prod-api/api/park/lot/list').then((res) => {
					this.quan = this.arr(res.rows)
					this.ting = this.arr(res.rows).slice(0,5)
				})
			},
			arr(arr) {
				for (var i = 0; i < arr.length - 1; i++) {
					for (var j = 0; j < arr.length - 1; j++) {
						if (arr[j].distance > arr[j + 1].distance) {
							var str = arr[j]
							arr[j] = arr[j + 1]
							arr[j + 1] = str
						}
					}
				}
				return arr
			}
		}
	}
</script>

<style>

</style>
